<template>
  <div>
    <cube-tab-bar v-model="selectedLabel"
                  showSlider
                  :useTransition="disabled"
                  ref="tabNav"
                  :data="tabLabels">
    </cube-tab-bar>
    <div class="tab-slide-container">
      <cube-slide
        ref="slide"
        :loop="loop"
        :initial-index="initialIndex"
        :auto-play="autoPlay"
        :show-dots="showDots"
        :options="slideOptions"
        @scroll="scroll"
        @change="changePage"
      >
        <cube-slide-item>
          <cube-scroll :options="scrollOptions">
            <cube-form :model="cusIntention">
              <cube-form-group class="custom-form-group" legend="基本信息">
                <cube-form-item :field="fields[0]"></cube-form-item>
                <cube-form-item :field="fields[1]"></cube-form-item>
                <cube-form-item :field="fields[2]"></cube-form-item>
                <cube-form-item :field="fields[3]">
                  <cube-button class="date-select-btn" @click="showDatePicker">{{cusIntention.weddingDate || '请选择日期'}}</cube-button>
                  <date-picker ref="datePicker" @select="dateSelectHandler"></date-picker>
                </cube-form-item>
                <cube-form-item :field="fields[4]"></cube-form-item>
                <cube-form-item :field="fields[5]"></cube-form-item>
                <cube-form-item :field="fields[6]"></cube-form-item>
                <cube-form-item :field="fields[7]">
                  <cube-button class="date-select-btn" @click="showDateSegmentPicker">{{cusIntention.travelDateRegion || '请选择起止日期'}}</cube-button>
                </cube-form-item>
                <cube-form-item :field="fields[8]"></cube-form-item>
                <cube-form-item :field="fields[9]"></cube-form-item>
                <cube-form-item :field="fields[10]"></cube-form-item>
                <cube-form-item :field="fields[11]"></cube-form-item>
                <cube-form-item :field="fields[12]"></cube-form-item>
                <cube-form-item :field="fields[13]"></cube-form-item>
                <cube-form-item class="custom-form-btn">
                  <cube-button type="submit">保存</cube-button>
                </cube-form-item>
              </cube-form-group>
            </cube-form>
            <cube-form :model="priceObj">
              <cube-form-group class="custom-form-group" legend="报价信息">
                <cube-form-item :field="priceFields[0]"></cube-form-item>
                <cube-form-item :field="priceFields[1]"></cube-form-item>
                <cube-form-item :field="priceFields[2]"></cube-form-item>
                <cube-form-item class="custom-form-btn">
                  <cube-button type="submit" @click.native="handlePriceOk">报价</cube-button>
                </cube-form-item>
              </cube-form-group>
            </cube-form>
          </cube-scroll>
        </cube-slide-item>
        <cube-slide-item>
          <cube-scroll :options="scrollOptions">

          </cube-scroll>
        </cube-slide-item>
        <cube-slide-item>
          <cube-scroll :options="scrollOptions">

          </cube-scroll>
        </cube-slide-item>
        <cube-slide-item>
          <cube-scroll :options="scrollOptions">

          </cube-scroll>
        </cube-slide-item>
      </cube-slide>
    </div>
  </div>
</template>
<script>
  import DatePicker from '@/components/date-picker.vue'
  import {timestampFormat} from '@/common/utils'
  import {getCusUsers, cusPrice} from '@/api/index'

  const dateSegmentData = [
    {
      is: 'cube-date-picker',
      title: '开始日期',
      min: new Date(2000, 0, 1),
      max: new Date(2030, 11, 31)
    },
    {
      is: 'cube-date-picker',
      title: '结束日期',
      min: new Date(2000, 0, 1),
      max: new Date(2030, 11, 31)
    }
  ]

  export default {
    components: {
      DatePicker
    },
    data () {
      return {
        selectedLabel: '基本信息',
        disabled: false,
        tabLabels: [{label: '基本信息'}, {label: '意向信息'}, {label: '订单信息'}, {label: '物料信息'}, {label: '回访记录'}],
        loop: false,
        autoPlay: false,
        showDots: false,
        slideOptions: {
          listenScroll: true,
          probeType: 5,
          /* lock y-direction when scrolling horizontally and  vertically at the same time */
          directionLockThreshold: 0
        },
        scrollOptions: {
          /* lock x-direction when scrolling horizontally and  vertically at the same time */
          directionLockThreshold: 0
        },
        cusInfo: {weddingDate: ''},
        cusIntention: {
          tripTypeArr: [],
          destination: '',
          base: '',
          weddingDate: '',
          hotelType: '',
          adults: 0,
          child: 0,
          travelDateRegion: '',
          tripDays: 0,
          tripNights: 0,
          budget: '',
          budgetLevel: null,
          rate: null,
          point: ''
        },
        options: {
          scrollToInvalidField: true,
          layout: 'standard' // classic fresh
        },
        fields: [
          {
            type: 'checkbox-group',
            modelKey: 'tripTypeArr',
            label: '行程类型',
            props: {
              options: [
                {label: '婚礼', value: 1},
                {label: '婚拍', value: 2},
                {label: '度蜜月', value: 3},
                {label: '亲子', value: 4},
                {label: '旅行', value: 5}
              ]
            },
            rules: {
              required: true
            }
          },
          {
            type: 'input',
            modelKey: 'destination',
            label: '意向目的地',
            props: {
              placeholder: '请输入'
            }
          },
          {
            type: 'input',
            modelKey: 'base',
            label: '出发地',
            props: {
              placeholder: '请输入'
            }
          },
          {
            modelKey: 'weddingDate',
            label: '婚期'
          },
          {
            type: 'select',
            modelKey: 'hotelType',
            label: '酒店类型',
            props: {
              options: ['奢华五星', '豪华四星', '舒适三星及以下', '民宿及特色酒店']
            }
          },
          {
            type: 'input',
            modelKey: 'adults',
            label: '成人数',
            props: {
              type: 'number',
              placeholder: '请输入数字'
            }
          },
          {
            type: 'input',
            modelKey: 'child',
            label: '儿童数',
            props: {
              type: 'number',
              placeholder: '请输入数字'
            }
          },
          {
            modelKey: 'travelDateRegion',
            label: '行程起止日期'
          },
          {
            type: 'input',
            modelKey: 'tripDays',
            label: '行程时长(天)',
            props: {
              type: 'number',
              placeholder: '请输入数字'
            }
          },
          {
            type: 'input',
            modelKey: 'tripNights',
            label: '行程时长(晚)',
            props: {
              type: 'number',
              placeholder: '请输入数字'
            }
          },
          {
            type: 'input',
            modelKey: 'budget',
            label: '总预算',
            props: {
              type: 'text',
              placeholder: '数字或文字描述均可'
            }
          },
          {
            type: 'select',
            modelKey: 'budgetLevel',
            label: '预算等级',
            props: {
              options: [{text: '低', value: 1}, {text: '中', value: 2}, {text: '高', value: 3}]
            }
          },
          {
            type: 'select',
            modelKey: 'rate',
            label: '意向度',
            props: {
              options: [{text: '弱', value: 1}, {text: '中', value: 2}, {text: '强', value: 3}]
            }
          },
          {
            type: 'textarea',
            modelKey: 'point',
            label: '备注',
            props: {
              placeholder: '请输入总结或判断性的文字',
              maxlength: 60
            }
          }
        ],
        priceObj: {
          cusIntentionId: null,
          description: '',
          price: null,
          priceFrom: ''
        },
        priceFields: [
          {
            type: 'input',
            modelKey: 'description',
            label: '产品名',
            props: {
              placeholder: '请输入'
            },
            rules: {
              required: true
            },
            trigger: 'blur'
          },
          {
            type: 'input',
            modelKey: 'price',
            label: '价格',
            props: {
              type: 'number',
              placeholder: '请输入'
            },
            rules: {
              required: true
            },
            trigger: 'blur'
          },
          {
            type: 'select',
            modelKey: 'priceFrom',
            label: '报价人',
            props: {
              options: []
            },
            rules: {
              required: true
            }
          }
        ],
        cusUsers: [],
        cusIntentionPrices: []
      }
    },
    mounted () {
      // 产品
      getCusUsers({roleId: 3}, (data) => {
        this.cusUsers = data.result
        data.result.forEach(item => {
          this.priceFields[2].props.options.push({text: item.nickname, value: item.id})
        })
      })
      this.dateSegmentPicker = this.$createSegmentPicker({
        data: dateSegmentData,
        onSelect: (selectedDates, selectedVals, selectedTexts) => {
          console.log(selectedDates)
          console.log(selectedVals)
          console.log(selectedTexts)
          this.cusIntention.travelDateRegion = selectedTexts[0].join('-') + ' 至 ' + selectedTexts[1].join('-')
          // this.$createDialog({
          //   type: 'warn',
          //   content: `Selected Items: <br/> - 入学时间: ${selectedTexts[0].join('')} <br/> - 毕业时间: ${selectedTexts[1].join('')}`,
          //   icon: 'cubeic-alert'
          // }).show()
        },
        onNext: (i, selectedDate, selectedValue, selectedText) => {
          dateSegmentData[1].min = selectedDate
          if (i === 0) {
            this.dateSegmentPicker.$updateProps({
              data: dateSegmentData
            })
          }
        }
      })
    },
    computed: {
      initialIndex () {
        let index = 0
        index = this.findIndex(this.tabLabels, item => item.label === this.selectedLabel)
        return index
      }
    },
    methods: {
      changePage (current) {
        this.selectedLabel = this.tabLabels[current].label
      },
      scroll (pos) {
        const x = Math.abs(pos.x)
        const tabItemWidth = this.$refs.tabNav.$el.clientWidth
        const slideScrollerWidth = this.$refs.slide.slide.scrollerWidth
        const deltaX = x / slideScrollerWidth * tabItemWidth
        this.$refs.tabNav.setSliderTransform(deltaX)
      },
      findIndex (ary, fn) {
        if (ary.findIndex) {
          return ary.findIndex(fn)
        }
        /* istanbul ignore next */
        let index = -1
        /* istanbul ignore next */
        ary.some(function (item, i, ary) {
          const ret = fn.call(this, item, i, ary)
          if (ret) {
            index = i
            return ret
          }
        })
        /* istanbul ignore next */
        return index
      },
      showDatePicker () {
        this.$refs.datePicker.show()
      },
      dateSelectHandler (selectedVal) {
        this.cusIntention.weddingDate = timestampFormat(new Date(selectedVal[0], selectedVal[1] - 1, selectedVal[2]))
      },
      showDateSegmentPicker () {
        this.dateSegmentPicker.show()
      },
      handlePriceOk () {
        this.priceObj.cusIntentionId = this.cusIntention.id
        cusPrice(this.priceObj, (data) => {
          this.cusIntentionPrices.push(data.result)
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .tab-slide-container {
    position: fixed;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 0;
    .custom-form-group /deep/ {
      .cube-form-group-legend {
        padding: 10px 15px;
        text-align: left;
      }
      .date-select-btn {
        padding-left: 0;
        padding-right: 0;
        text-align: left;
        color: inherit;
        background: none;
        border: none;
        outline: none;
      }
      .custom-form-btn {
        margin: 15px 0;
      }
    }
  }
</style>

